<template>
    <div class="remind_right_b">
        <div class="" style="display: flex;align-items: center;">
            <img class="remind_right_b_img" src="@/assets/组 6824 拷贝 3.png" alt="">
            <p class="remind_right_b_p">{{ title }}</p>
        </div>
        <div class="remind_right_b_div">
            <div class="remind_right_b_div_press">
                <!-- <img class="remind_right_b_div_press_img" src="@/assets/图层 2.png" alt=""> -->
            </div>
        </div>
        <div class="remind_right_b_b">{{ Number(number).toFixed(2) }} <span class="" style="font-size: 12px;"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: ["title", "number"],
    data() {
        return {
        }
    },
    methods: {
        remindStyle(res) {
            let style = "width:" + res * 2.04 + "px"
            return style
        }
    }
}
</script>

<style lang="scss" scoped>
.remind_right_b {

    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .remind_right_b_img {
        width: 23px;
        height: 14px;
    }

    .remind_right_b_p {
        padding: 0;
        margin: 0;
        width: 82px;
        height: 16px;
        margin-right: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
    }

    .remind_right_b_div {
        overflow: hidden;
        position: absolute;
        top: 40px;
        width: 264px;
        height: 2px;
        background-color: rgba($color: #000000, $alpha: 0.1);


        .remind_right_b_div_press {
            background: linear-gradient(to right, #C6FBFF, #58A3F0, #00468D);
            height: 11px;
            position: relative;

            .remind_right_b_div_press_img {
                width: 17px;
                height: 29px;
                position: absolute;
                right: -8px;
                bottom: -9px;
            }
        }


    }

    .remind_right_b_b {
        z-index: 10;
        width: 64px;
        height: 22px;
        padding-bottom: 5px;
        margin-left: 7px;
        display: flex;
        justify-content: center;
        align-items: end;
        background: url("@/assets/矩形 561 拷贝 4.png");
        text-align: end;
        font-family: DIN;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }
}
</style>